<template>
    <div class="component-main-content">
        <!-- @grand-son-click="handleGrandSonClick" -->
        <!-- 在这里做一个解释：使用n-message-provider和n-notification-provider来包括自己的组件的作用是因为能够使内部的子组件都能使用useMessage、userNotification，不然会报错找不到Provider -->
        <n-message-provider>
            <n-notification-provider>
                <keep-alive>
                    <component :is="currentComponent" @child-click="childClick" />
                </keep-alive>
            </n-notification-provider>
        </n-message-provider>
    </div>


    <!-- 遮罩层 -->
    <div id="mask-player" v-show="registryStatus" @click="switchRegistryStatus"></div>
    <!-- 用户身份验证 -->
    <Transition name="fade">
        <div id="user-info-registry" v-show="registryStatus">
            <Registry @son-registry-click="switchRegistryStatus" />
        </div>
    </Transition>



</template>


<script setup lang="ts">
import { computed, onMounted, ref, shallowRef, watch } from 'vue';
import Registry from "../../components/Registry/registry.vue"
import { userStore } from '../../store/userStore';
import { ElMessage, ElMessageBox } from 'element-plus';
import Socket from "../Socket/socket.vue"
import Music from "@components/General/Music/index.vue"
// 引入页面组件


const user_store = userStore();


const userLoginStatus = ref<boolean>(false)

const registryStatus = ref<boolean>(false);
function switchRegistryStatus() {
    registryStatus.value = !registryStatus.value;
}

function minWindow() {
    window.electronAPI.minimizeWindow();
}
function maxWindow() {
    ElMessage.warning("暂不支持！暂不支持！")
    // window.electronAPI.maximizeWindow();
}
function editWindow() {
    // window.electronAPI.editWindow();
    ElMessageBox.confirm(
        '确认退出程序呒',
        'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: "Cancel",
        type: "warning",
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true,
                    instance.confirmButtonText = "Saving....",
                    setTimeout(() => {
                        done()
                        setTimeout(() => {
                            instance.confirmButtonLoading = false
                            window.electronAPI.editWindow();
                        }, 500);
                    }, 2000);
            } else {
                done()
            }
        }
    }
    )
}

// 动态存储组件
const currentComponent = shallowRef<typeof Socket | typeof Music | null>(null);

watch(userLoginStatus, (newStatus: boolean) => {
    if (newStatus) {
        currentComponent.value = Socket;
    } else {
        ElMessage.error("111")
    }
})

watch(() => user_store.userLoginStatus, (newStatus: boolean) => {
    if (newStatus) {
        currentComponent.value = Socket;
    }
})

// 子组件点击事件
const childClick = (key: string): void => {
    currentComponent.value = componentMap[key as keyof typeof componentMap];
}

// 组件映射关系
const componentMap = {
    "/snow-socket": Socket,
    "/snow-music": Music
}


// 系统菜单
const systemMenuStatus = ref<boolean>(false);
function switchShowSystemMenu() {
    systemMenuStatus.value = !systemMenuStatus.value;
}

// 每日一言
const sayings = ref<any>({
    en: "",
    zh: ""
});

// async function getSayings() {
//     try {
//         const response = await axios.get('https://api.yyy001.com/api/quote');
//         sayings.value.en = response.data.en;
//         sayings.value.zh = response.data.zh;
//     } catch (error) {
//         console.error('Error fetching sayings:', error);
//     }
// }


// 处理子组件向组件间传递信息
function sendMessageToParent(key: string) {
    ElMessage.warning(`在组件中收到子组件传递的信息了：${key}`);
}


onMounted((): void => {
    // 获取登录状态
    // userLoginStatus.value = user_store.userLoginStatus;
    // getSayings();
    if (user_store.userLoginStatus) {
        currentComponent.value = Socket;
        return;
    } else {
        switchRegistryStatus();
    }
})

</script>


<style lang="scss" scoped>
@import url("./frame.scss");
</style>